<template>
	<view>
		<view class="head">
			<view class="catalog">
				<view class="catalog-item" style="margin-left:36upx ;margin-right: 90upx;" :class="type==0?'active':''" @click="type=0">
					划卡
				</view>
				<view style="width: 250upx;"></view>
				<view class="catalog-item" :class="type==1?'active':''" @click="type=1">
					单次服务
				</view>
			</view>
		</view>
		<view class="card-list" v-if="type==0">
			<view class="card-item" v-for="(card,index) in cards" :key="index">
				<view class="card-title">
					<view class="card-name">
						{{card.name}}
					</view>
					<view class="card-count" v-if="card.service_count>0">
						剩余<text style="color: #FF7465;">{{card.expire_count}}</text>次
					</view>
					<view class="card-count" v-else>
						<text style="color: #FF7465;">次数不限</text>
					</view>
				</view>
				<view class="card-service-list">
					<view class="card-service-item" @click="chooseCardItem(card.service,card.id)">
						<view class="card-service-name">
							{{card.service_name}}
						</view>
						<image :src="card.service==service_id&&card.id==card_item_id?'/static/checked.png':'/static/uncheck.png'" class="item-check" mode=""></image>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="cards.length==0">
				暂无卡项
			</view>
		</view>
		<view class="no-data"  v-if="services.length==0 && type==1">
			暂无服务
		</view>
		<view class="list" v-if="type==1">
			
			<view class="list-item" v-for="(item,key) in services" :key="key"  @click="chooseSingleItem(item.id)">
				<image :src="item.thumb" class="list-image" mode=""></image>
				<view class="item-info">
					<view style="display: flex;flex-direction: column;flex: 1;">
						<view class="item-name">
							{{item.name}}
						</view>
						<view class="item-price">
							￥{{item.price}}
						</view>
					</view>
					<image :src="item.id==service_id?'/static/checked.png':'/static/uncheck.png'" class="item-check" mode=""></image>
				</view>
				
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<view class="bottom" >
			<view class="bottom-btn" :class="service_id>0?'active':''" @click="chooseTime">
				下一步
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				store_id:0,
				staff_id:0,
				type:1,
				catalog:0,
				services:[],
				cards:[],
				service_id:0,
				card_item_id:0,
				catalogs:[],
			};
		},
		onLoad:function(e){
			this.store_id=e.shop_id;
			this.staff_id=e.staff_id;
			this.getServices();
		},
		methods:{
			chooseTime:function(){
				if(this.service_id==0){
					return;
				}
				if(this.staff_id==0){
					uni.navigateTo({
						url:"/pages/staff/choose/choose?store_id="+this.store_id+"&service_id="+this.service_id+"&pay_type="+this.type+"&card_item_id="+this.card_item_id,
					});
				}else{
					uni.navigateTo({
						url:"/pages/service/booking/booking?store_id="+this.store_id+"&staff_id="+this.staff_id+"&service_id="+this.service_id+"&pay_type="+this.type+"&card_item_id="+this.card_item_id,
					});
				}
				
			},
			chooseCardItem:function(id,card_item_id){
				if(this.service_id==id&&this.card_item_id==card_item_id){
					this.service_id=0;
					this.card_item_id=0;
				}else{
					this.service_id=id;
					this.card_item_id=card_item_id;
				}
			},
			chooseSingleItem:function(id){
				if(this.service_id==id){
					this.service_id=0;
				}else{
					this.service_id=id;
				}
				this.card_item_id==0;
			},
			getServices:function(){
				uni.showLoading({
					title:"加载中",
				})
				var that=this;
				that.ajax("/service/services/",{
					token:uni.getStorageSync("token"),
					store_id:this.store_id,
				},function(res){
					that.services=res.data.data.services;
					that.cards=res.data.data.cards;
					that.catalogs=res.data.data.catalogs;
				});
			},
		}
	}
</script>

<style>
	.card-list{
		margin-top: 60upx;
		padding: 25upx;
	}
	.card-item{
		padding: 24upx;
		background: #FFFFFF;
		border-radius: 12upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		margin-top: 28upx;
	}
	.card-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30upx;
		border-bottom: 1upx solid #EFEFEF;
	}
	.card-name{
		color: #8B8B8B;
		font-size: 28upx;
	}
	.card-count{
		font-size: 28upx;
		color: #8B8B8B;
	}
	.card-service-list{
		padding-bottom: 30upx;
	}
	.card-service-item{
		padding: 30upx 25upx 0 25upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.card-service-name{
		color: #4B4B4B;
		font-size: 28upx;
	}
	.card-service-count{
		color: #b4b4b4;
		font-size: 24upx;
	}
	.bottom{
		width: 100%;
		padding: 18upx;
		text-align: center;
		font-size: 28upx;
		background: #white;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow:0upx 2upx 20upx 0upx rgba(71,142,126,0.15);
	}
	.bottom-btn{
		background: #E4E4E4;
		height: 84upx;
		margin: auto;
		font-size: 36upx;
		line-height: 84upx;
		color: #ffffff;
		border-radius:46upx;
		width: 460upx;
	}
	.bottom-btn.active{
		background: #45AA8C;
	}
	.list{
		margin-top: 80upx;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.list-item{
		padding: 40upx 24upx;
		position: relative;
		align-items: center;
	}
	.list-image{
		width: 158upx;
		height: 146upx;
		border-radius: 12upx;
	}
	.item-info{
		position: absolute;
		left: 98upx;
		right: 36upx;
		padding-left: 126upx;
		padding-right: 44upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		height: 185upx;
		top:24upx;
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-name{
		font-size: 28upx;
	}
	.item-price{
		margin-top: 32upx;
		font-size: 24upx;
		color:#4B4B4B;
	}
	.item-check{
		width: 40upx;
		height: 40upx;
	}
	
	.head{
		background: #ffffff;
		z-index: 10;
		color: #ABABAB;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.catalog{
		background: #ffffff;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		justify-content: center;
		padding: 0 28upx;
	}
	.catalog-item{
		padding: 18upx 0;
	}
	.catalog-item.active{
		border-bottom: 4upx solid #45AA8C;
		color:#45AA8C;
		
	}
	.sort{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26upx;
		padding: 0 28upx;
		background: #fdfdfd;
	}
	.sort-item{
		padding: 0 30upx;
		line-height: 54upx;
		margin:16upx 0;
		margin-left: 20upx;
		white-space: nowrap;
	}
	.sort-item.active{
		background: #ffffff;
		border-radius: 27upx;
		color: #45AA8C;
		box-shadow:0upx 2upx 20upx 0upx rgba(56,183,154,0.2);
		border-radius:24px;
	}
</style>
